<template>
	<view class="bg">
		<view class="avater">
			<img src="../../../static/avater.png" class="img-avater" v-show="!userInfo.headerUrl" />
			<!-- <image src="/static/img/women.svg" class="img-avater" v-show="!userInfo.headerUrl&&userInfo.sex==2" mode="widthFix" style="width: 100%;"></image>
			<image src="/static/img/man.svg" class="img-avater" v-show="!userInfo.headerUrl&&userInfo.sex==1" mode="widthFix" style="width: 100%;"></image>
			<image src="/static/img/none.svg" class="img-avater" v-show="!userInfo.headerUrl&&userInfo.sex!=1&&userInfo.sex!=2" mode="widthFix" style="width: 100%;"></image> -->
			<img :src="userInfo.headerUrl" class="img-avater" v-show="userInfo.headerUrl"/>
		</view>
		<view class="body">
			<view class="div-userInfo">
				<view class="div-userInfo-line1">{{userInfo.nickName}}</view>
				<view class="div-userInfo-line2" v-if="userInfo.loginName"><span>{{userInfo.loginName}}</span><view class="btn-bind" @click="goToBindPhone">修改手机号</view></view>
				<view class="div-userInfo-line2" v-if="userInfo.nickName&&!userInfo.loginName"><span>暂未绑定手机号</span><view class="btn-bind" @click="goToRegisterPhone">绑定手机号</view></view>
				<view class="div-userInfo-line2">{{userInfo.country}} {{userInfo.province}} {{userInfo.city}}</view>
			</view>
			<view class="div-card">
				<view class="div-card-block">
					<img src="../../../static/img/yd.svg" class="img-logo" />
					<text>{{dataNumbers[0]}}</text>
				</view>
				<view class="div-card-line"></view>
				<view class="div-card-block">
					<img src="../../../static/img/dx.svg" class="img-logo" />
					<text>{{dataNumbers[2]}}</text>
				</view>
				<view class="div-card-line"></view>
				<view class="div-card-block">
					<img src="../../../static/img/lt.svg" class="img-logo" />
					<text>{{dataNumbers[1]}}</text>
				</view>
			</view>
			<view class="div-shadow"></view>
			<view class="div-text">欢迎使用物联网卡管理系统！与我们合作是您的成功，与您相识是我们的幸运!</view>
			<!-- <view class="div-text" v-if="phoneDisplay">咨询电话：0411-62666127</view> -->
			<view class="div-shadow"></view>
			<view class="div-border">
				<view class="div-border-title">其他操作</view>
				<view class="div-border-block">
					<view class="div-border-btn" @click="gotoOrder('/pages/tabbar/order/orderList','package')">
						<text>订单记录</text>
						<img src="../../../static/img/qian.png" class="img-icon" />
					</view>
					<view class="div-border-btn" @click="gotoOrder('/pages/tabbar/order/orderList','balance')">
						<text>余额记录</text>
						<img src="../../../static/img/purse.png" class="img-icon" />
					</view>
					<view class="div-border-btn" @click="gotoOrder('/pages/tabbar/order/orderList','change')">
						<text>换卡记录</text>
						<img src="../../../static/img/dingdan.png" class="img-icon1" />
					</view>
				</view>
				<view class="div-border-block1">
					<view class="div-border-btn" @click="clearCache">
						<text>退出登录</text>
						<img src="../../../static/img/qingli.png" class="img-icon1" />
					</view>
					<view class="div-border-btn" style="margin-left: 20px;" @click="goToMessage">
						<text>消息中心</text>
						<img src="../../../static/img/xiaoxi.png" class="img-icon1" />
					</view>
				</view>
				<!--  -->
				<view class="div-border-block2" v-if='showForUs'>
					<view class="div-border-btn" @click="gotoExchangeFlow">
						<text>兑换流量</text>
						<img src="../../../static/img/duihuan.png" class="img-icon" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {}, //用户信息
				dataNumbers: [0, 0, 0], //卡板统计
				showForUs: false, //是否显示兑换流量
				phoneDisplay:false
			}
		},
		onLoad() {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
				WeixinJSBridge.invoke('setFontSizeCallback', {
					'fontSize': 0
				});
				// 重写设置网页字体大小的事件
				WeixinJSBridge.on('menu:setfont', function() {
					WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
				});

			};
			let local = location.href;
			if (local.indexOf('192.168.1.102') > 0 || local.indexOf('//fxy.1688iot.vip/') > 0 || local.indexOf('//iot.1688iot.vip/') > 0|| local.indexOf('chinawifi.net') > 0) {
				this.showForUs = true;
			}
			var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
			let wxFlag = ua.match(/MicroMessenger/i) == "micromessenger"?true:false;
			if(!wxFlag){
				this.phoneDisplay = true
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				this.$req.userData('/card/operatorNumber').then(v => {
					this.dataNumbers = v.data
				})
				this.$req.userData('/customer/getCustomerInfo').then(v => {
					this.userInfo = v.data
				})
			},
			//跳转页面 -- 订单列表
			gotoOrder(page,tab) {
				uni.setStorage({
					key: 'tab',
					data: tab
				})
				uni.switchTab({
					url: page
				})
			},
			//清理缓存
			clearCache() {
				uni.removeStorage({
					key: 'custoken',
					success: function(v) {
						uni.showToast({
							title: "操作成功！请刷新！",
							icon: 'none',
							duration: 3000
						})
					}
				})
				uni.removeStorage({
					key: 'sessionId',
					success: function(v) {
						
					}
				})
				var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
				let wxFlag = ua.match(/MicroMessenger/i) == "micromessenger"?true:false;
				if(wxFlag){
					window.location.href = "/api/single-sign-on-center/customer/acquireUserWxLogin/white"
				}
				else{
					uni.navigateTo({
						url: '../../login/login?status=login'
					})
				}
			},
			//跳转页面 -- 兑换流量
			gotoExchangeFlow() {
				uni.navigateTo({
					url: '/pages/exchangeFlow/newIndex'
				});
			},
			//跳转页面 -- 消息列表
			goToMessage(){
				uni.switchTab({
					url: '/pages/message/newIndex'
				})
			},
			//跳转页面 -- 修改手机号
			goToBindPhone(){
				uni.navigateTo({
					url: '../../other/bindPhone/bindPhone'
				})
			},
			//跳转页面 -- 绑定手机号
			goToRegisterPhone(){
				uni.navigateTo({
					url: '../../login/login?status=register'
				})
			}
		}
	}
</script>

<style>
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(to top, #c2e9fb 0%, #a1c4fd 100%);
	}

	.avater {
		width: 30%;
		height: 30vw;
		position: absolute;
		top: 5vw;
		left: 10%;
		border-radius: 50%;
		overflow: hidden;
		z-index: 10;
		background-image: linear-gradient(to bottom, #c2e9fb 0%, #a1c4fd 100%);
	}

	.img-avater {
		width: 100%;
		height: auto;
	}

	.body {
		width: 96%;
		height: calc(100% - 20vw);
		position: absolute;
		top: 20vw;
		left: 2%;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ffffff 100%);
		border-radius: 20px 20px 0 0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		overflow-y: scroll;
	}

	.div-userInfo {
		width: 50vw;
		height: auto;
		position: relative;
		top: 0;
		left: 45%;
		padding: 10upx 0;
	}

	.div-userInfo-line1 {
		width: 100%;
		height: 50upx;
		line-height: 44upx;
		position: relative;
		top: 0;
		left: 0;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}

	.div-userInfo-line2 {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		position: relative;
		top: 0;
		left: 0;
		font-size: 24upx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.div-card {
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}

	.div-card-block {
		width: 30%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #555;
		line-height: 50upx;
	}

	.img-logo {
		width: 25px;
		height: auto;
	}

	.div-card-line {
		width: 1px;
		height: 50upx;
		position: relative;
	}

	.div-shadow {
		width: 100%;
		height: 5px;
		/* background: #f2f2f2; */
		background-color: rgb(248, 248, 255, 0.5);
		position: relative;
	}

	.div-text {
		width: 90%;
		height: auto;
		position: relative;
		padding: 10px 5%;
		text-indent: 30px;
		font-size: 28upx;
		color: #555;
	}

	.div-border {
		width: 90%;
		height: auto;
		position: relative;
		top: 5%;
		left: 5%;
		border-top: 1px solid #a1c4fd;
		padding-bottom: 10%;
	}

	.div-border-title {
		width: 30%;
		height: 50upx;
		position: absolute;
		top: 0;
		left: 35%;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ffffff 100%);
		margin-top: -25upx;
		line-height: 50upx;
		text-align: center;
		color: #92b2e5;
		font-size: 30upx;
	}

	.div-border-block {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		align-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 50upx 0;
		margin: 30px 5% 15px 5%;
	}

	.div-border-block1 {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.div-border-block2 {
		width: 90%;
		height: auto;
		position: relative;
		top: 0;
		left: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 40px;
	}

	.div-border-btn {
		width: 80px;
		height: 40px;
		background: #a1c4fd;
		position: relative;
		font-size: 28upx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
	}

	.div-border-btn::before {
		content: "";
		position: absolute;
		top: -25px;
		left: 0;
		width: 0;
		height: 0;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
		border-bottom: 25px solid #a1c4fd;
	}

	.div-border-btn::after {
		content: "";
		position: absolute;
		bottom: -25px;
		left: 0;
		width: 0;
		height: 0;
		border-left: 40px solid transparent;
		border-right: 40px solid transparent;
		border-top: 25px solid #a1c4fd;
	}

	.img-icon {
		width: 30px;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 30px;
		margin-left: 40px;
		z-index: 10;
	}

	.img-icon1 {
		height: 30px;
		width: auto;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 30px;
		margin-left: 45px;
		z-index: 10;
	}
	.btn-bind{
		width: 80px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background-color: #a1c4fd;
		color: #fff;
		font-size: 20upx;
		padding: 0;
		border: none !important;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
</style>
